import React from "react";
import {
  GlobalOutlined,
  AccountBookOutlined,
  DingtalkOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";
import styles from "./SideMenu.module.css"
import { sideMenuData } from "./MockData";
export const SideMenu: React.FC = (props) => {
  return (
    <Menu mode="vertical" className={styles["sideMenu"]}>
      {sideMenuData.map((item) => {
        return (
          <Menu.SubMenu
            key={item.id}
            title={
              <span>
                <GlobalOutlined />
                {item.title}
              </span>
            }
          >
            {item.subMenu.map((item1) => {
              return (
                <Menu.SubMenu
                  key={item1.id}
                  title={
                    <span>
                      <AccountBookOutlined />
                      {item1.title}
                    </span>
                  }
                >
                  {item1.subMenu.map((item2, index) => {
                    return (
                      <Menu.Item key={`${item2}-${index}`}>
                        <span>
                          <DingtalkOutlined />
                          {item2}
                        </span>
                      </Menu.Item>
                    );
                  })}
                </Menu.SubMenu>
              );
            })}
          </Menu.SubMenu>
        );
      })}
    </Menu>
  );
};
